<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .top {
      height: 2000px;
      background-color: green;
    }

    body {
      height: 5000px;
    }
    #t,
    #tt,
    #ttt {
      /* border: #ccc thin solid; */
      /* display: inline-block; */
      width: 72%;
      margin: 0 auto;
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      background-color: pink;
    }
    #t{
      margin-left: 4px;
    }
    

    .t-num {
      height: 100%;
      overflow: hidden;
      /*background-color: #ccc;*/
      width: 35px;
      line-height: 60px;
      text-align: center;
    }

    .t-num-s {
      display: block;
      height: 100%;
      width: 100%;

      font-size: 48px;
      font-weight: bold;
      color: #fff;
      /*border: red thin solid;*/
    }


    .box {
      width: 400px;
      margin: 0 auto;
      height: auto;
      background-color: pink;
    }

    .number {
      display: flex;
      justify-content: space-around;
    }
    .num{
      width: 33%;
      position: relative;
    }
    .num:nth-child(3) .stext{
      right: 20px;
    }
    .stext{
      display: inline-block;
      position: absolute;
      right: 0;
      top: 30px;
      
    }
    .stextr{
      border-right: 1px solid #fff;
      padding-right: 10px;
    }
    .btext{
      text-align: center;
      font-size: 14px;
    }
  </style>
</head>

<body>
  <div class="top"></div>
  <!-- <div id="t"></div> -->
  <div class="box">
    <div class="number">
      <div class="num">
        <div id="t"></div>
        <span class="stext stextr">万件</span>
        <p class="btext">日最高发件量</p>
      </div>
      <div class="num">
        <div id="tt"></div>
        <span class="stext stextr">+万</span>
        <p class="btext">仓储面积(平方米）</p>
      </div>
      <div class="num">
        <div id="ttt"></div>
        <span class="stext">+</span>
        <p class="btext">服务大中型客户</p>
      </div>
    </div>
  </div>

  <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
  <script type="text/javascript" src="./digitalScroll.js"></script>
  <!-- <script src="./index.js"></script> -->
  <script>
    $(function () {

      let seeH = $(window).height() // 窗口的可视区域高度
      // console.log(seeH);
      let itemH = $('#t').offset().top // 元素距离页面顶部的距离
      // console.log(itemH);
      let flag = true
      // console.log(flag, '11111111111111111111');


      $(document).scroll(function () {
        let bol = $(window).scrollTop() // 窗口滚动的顶部偏移量
        console.log(bol);
        if (flag) {
          if (bol > itemH - seeH) {
            flag = false
            // console.log(flag, '2222222222222222');
            console.log('显示');
            let num = 120
            //配置项 p:滚动速度，height:数字容器的高度，spanclass：数字容器的classname,divClasss: span容器的class
            // numchange.config({p: 5}).change('t', num)
            let t = numchange()
            t.change('t', num)
            setInterval(() => {
              t.change('t', num)
            }, 3000)

            let num1 = 10
            let t1 = numchange()
            t1.change('tt', num1)
            setInterval(() => {
              t1.change('tt', num1)
            }, 3000)

            let num2 = 30
            let t2 = numchange()
            t2.change('ttt', num2)
            setInterval(() => {
              t2.change('ttt', num2)
            }, 3000)

          }
        }
      })
      // console.log(flag, '333333333333333');

    })




  </script>
</body>

</html>